/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /*index background by "xp00px"
     playlist background by "oskar overgaard"
     moarmy background by "Wrapped by Sarah"
     interest background by "ام سالم" */

    @font-face {
    font-family:"Caveat", cursive; 
    src: url(https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap);
    }
    
    /* index page*/
    
    body {
        color: #154734;
        font-family: Caveat;
        font-size: 20px;
        }
   
    .container {
  display: grid;
  grid-template:
    "header header header"
    "sidenav main right"
    "buttons buttons buttons"
    "footer footer footer";
  grid-gap: 10px;
  background-color: #0A5C36;
  padding: 10px;
  border-radius: 25px;
  width: 900px;
  margin: auto;
  }
  
    .container div {
  padding: 10px;
  }
  
    .container div.header {
  background-color: #E5FFDA;
  grid-area: header;
  text-align: center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  }
  
  .sidenav {
  grid-area: sidenav;
  display: block;
  flex-direction: column;
  background-color: #E5FFDA;
  }
  
  .sidenav div.box {
  background-color: white;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 25px;
  }
  
  .sidenav div.th {
  height:10px;
  }
  
    .row :after {
  clear: both;
  content:"";
  display: table;
  }
  
   .sidenav a:hover {
  color: #FFD700;
  }
  
  .container div.main {
  background-color: white;
  grid-area: main;
  text-align: center;
  }
  
  .container div.right {
  background-color: white;
  grid-area: right;
  text-align: center;
  }
  
  /* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /*index background by "xp00px"
     playlist background by "oskar overgaard"
     moarmy background by "Wrapped by Sarah"
     interest background by "ام سالم" */

    @font-face {
    font-family:"Caveat", cursive; 
    src: url(https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap);
    }
    
    /* index page*/
    
    body {
        color: #154734;
        font-family: Caveat;
        font-size: 20px;
        }
   
    .container {
  display: grid;
  grid-template:
    "header header"
    "sidenav main"
    "sidenav buttons"
    "footer footer";
  grid-gap: 10px;
  background-color: #0A5C36;
  padding: 10px;
  border-radius: 25px;
  width: 900px;
  margin: auto;
  }
  
    .container div {
  padding: 10px;
  }
  
    .container div.header {
  background-color: #E5FFDA;
  grid-area: header;
  text-align: center;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  }
  
  .sidenav {
  grid-area: sidenav;
  display: block;
  flex-direction: column;
  background-color: #E5FFDA;
  }
  
  .sidenav div.box {
  background-color: white;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 25px;
  }
  
  .sidenav div.th {
  height:10px;
  }
  
    .row :after {
  clear: both;
  content:"";
  display: table;
  }
  
   .sidenav a:hover {
  color: #FFD700;
  }
  
  .container div.main {
  background-color: white;
  grid-area: main;
  text-align: center;
  }
  
  
  .container div.buttons {
  background-color: white;
  grid-area: buttons;
  text-align:center;
  }  
    
    .container div.footer {
  background-color: #E5FFDA;
  grid-area: footer;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  }
  
  a {
  color: #0A5C36;
  text-decoration: none;
  }
  
  .img.a {
  vertical-align: baseline;
  }
  
  .image.neocities {
  float: right;
  }
  
    
    .container div.footer {
  background-color: #E5FFDA;
  grid-area: footer;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  }
  
  a {
  color: #0A5C36;
  text-decoration: none;
  }
  
  .img.a {
  vertical-align: baseline;
  }
  
  .image.neocities {
  float: right;
  }